/**
 * Created by Administrator on 2018/4/16 0016.
 */
import config from '../../../../config/config.js'
import Emitter from '../../../../mixins/emitter.js'
//  tools
import Popper from 'popper.js'
// prefix
const prefixCls = config.prefix + '-select-dropdown'
export default {
  name: prefixCls,
  mixins: [Emitter],
  props: {
    placement: {
      type: String,
      default: 'bottom-start'
    },
    className: {
      type: String
    },
    // 0 代表自适应
    width: {
      type: Number
    }
  },
  data () {
    return {
      popper: null,
      inputWidth: ''
    }
  },
  computed: {
    wrapClass () {
      return [
        prefixCls,
        this.className
      ]
    },
    styles () {
      const style = {}
      if (this.width === undefined) {
        if (this.inputWidth) {
          style.width = String(this.inputWidth).endsWith('px') ? this.inputWidth : `${this.inputWidth}px`
        }
      } else {
        if (this.width !== 0) {
          style.width = `${this.width}px`
        }
      }
      return style
    }
  },
  methods: {
    update () {
      let _parent = this.$parent
      let _hasFormItem = false
      if (_parent.$options.name == config.prefix + '-form-item') {
        _parent = _parent.$parent
        _hasFormItem = true
      }
      if (!_parent.currentVisible && !_parent.visible) {
        return
      }
      if (this.popper) {
        this.$nextTick(() => {
          this.popper.update()
        })
      } else {
        this.$nextTick(() => {
          this.popper = new Popper(
            _parent.reference || _parent.$refs.reference,
            this.$el,
            {
              placement: this.placement,
              modifiers: {
                computeStyle: {
                  gpuAcceleration: false
                }
              },
              onCreate: () => {
                this.resetTransformOrigin()
                this.$nextTick(this.popper.update())
              },
              onUpdate: () => {
                this.resetTransformOrigin()
              }
            }
          )
        })
      }
      // 如果用户指定了宽度, 则不计算了
      if (this.width !== undefined) {
        return
      }
      // set a height for parent is Modal and Select's width is 100%
      if (_parent.$options.name === config.prefix + '-select' ||
                _parent.$options.name === config.prefix + '-select-tree' ||
                _parent.$options.name === config.prefix + '-search' ||
                _parent.$options.name === config.prefix + '-organ-tree' ||
                _parent.$options.name === config.prefix + '-auto-complete'
      ) {
        // let _width
        // // 有 form-item的需要特殊处理
        // if (_parent.label) {
        //   const labelWidth = parseInt(Artery.getStyle(_parent.$el.querySelector('.' + config.prefix + '-form-item-label'), 'width'))
        //   _width = parseInt(Artery.getStyle(_parent.$el, 'width')) - labelWidth
        // } else {
        //   _width = parseInt(Artery.getStyle(_parent.$el, 'width'))
        // }
        let ref = _parent.$refs.reference
        if (ref.$el) {
          ref = ref.$el
        }
        this.inputWidth = Artery.getStyle(ref, 'width')
        // this.inputWidth = _width
      }
    },
    destroy () {
      if (this.popper) {
        setTimeout(() => {
          if (this.popper) {
            this.popper.destroy()
            this.popper = null
          }
        }, 300)
      }
    },
    resetTransformOrigin () {
      const placement = this.popper.popper.getAttribute('x-placement').split('-')[0]
      this.popper.popper.style.transformOrigin = placement === 'bottom' ? 'center top' : 'center bottom'
    }
  },
  mounted () {
    this.$on('update-popper', this.update)
    this.$emit('alreadyLoad', 'drop')
  },
  beforeDestroy () {
    if (this.popper) {
      this.popper.destroy()
    }
  }
}
